<template>
	<!--l累计邀请  邀请名单 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">累计邀请</text>
			</template>
		</u-navbar>
		<view class="content_all display  width-100 displayColumn">
			<view class="content_all_one display  width-100 M-T30 displaycenter_aliem" style="padding-left:30rpx ;">
				<view
					:class="{fn_item:selectTime!=index, display:true, fn_item1:selectTime==index,all_item:true,'M-L40':index!=0}"
					v-for="(item,index) in arr" :key="index" @click="changeTime(index)">
					<text
						:class="{fontSize:true, font_comm:true, txt1:selectTime!=index,txt2:selectTime==index}">{{item}}</text>
				</view>
			</view>
			<!-- 客户总计 -->
			<view class="client_all display  width-100 M-T24">
				<span class="fontSize font_comm txt3 M-L30">共<span style="font-size: 40rpx;">{{List.length}}</span>个邀请</span>
			</view>
			<scroll-view id="ceshi" scroll-y="true" class="scroll-Y " :style="{height: scrollHeight,marginTop:'20rpx'}" @scrolltolower="scrolltolower">
			<block v-for="(item,index) in List" :key="index">
			<!-- 客户明细 -->
			<view class="clientdetails display  width-100 all_item displayColumn M-T20">
				<view class="clientdetails_all display  width_699 displaycenter_aliem">
					<view class="clientdetails_all_left display  all_item M-L24">
						<img class="imgs" src="@/static/img/car-manage.png" alt="" />
					</view>
					<view class="clientdetails_all_right display  displayColumn M-L16">
						<view class="fn_one display  width-100">
							<span class="fontSize font_comm fn_txt1">{{item.inviteUserName}}</span>
						</view>
						<view class="fn_two display  width-100 M-T12">
							<span class="fontSize font_comm fn_txt2">我的邀请奖励：</span>
							<span class="fontSize font_comm fn_txt3">￥{{item.inviteTotalAmount}}元</span>
						</view>
						<view class="fn_three display  width-100 M-T12">
							<span class="fontSize font_comm fn_txt2">{{item.inviteType==0 ?'扫码邀请' :'分享名片邀请'}}</span>
						</view>
					</view>
				</view>
			</view>
			</block>
			<view class="display width-100" style="height: 50rpx;">
				
			</view>
			</scroll-view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectTime: 0,
				arr: ['全部', '今日', '近7天', '近30天', '近90天'],
				List:[],
				time:'',
				pageNum:1,
				scrollHeight:'90vh',
				flag:1
			}
		},
		
		onLoad() {
			this.getUserList();
		},
		onReady() {
		      const that = this
		      this.$nextTick(() => {
		        uni.getSystemInfo({
		          success: function (res) {
		            const query = wx.createSelectorQuery()
		            query.select('#ceshi').boundingClientRect()
		            // 获取滚动容器css数据
		            query.exec((resData) => {
						console.log(resData)
		              if (resData && resData.length) {
		                // 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
		                that.scrollHeight = (res.windowHeight - resData[0].top)*2 + 'rpx'
		              }
		            })
		          },
		        })
		      })
			},
		methods: {
			scrolltolower(){
				if(this.flag==0){
					return false;
				}
				console.log('下拉刷新')
				this.getUserList(this.pageNum++);
			},
			changeTime(index){
				this.List = [];
				this.pageNum = 1;
				this.selectTime=index;
				this.flag = 1;
				let date = new Date();
				// console.log(date)
				if(index==0){
					this.time = ''
					this.getUserList()
				}else if(index==1){
					this.time = uni.$u.date(date, 'yyyy-mm-dd hh:MM:ss');
					this.getUserList()
				}else if(index==2){
					// 七天
					this.qiago(7*24*60*60*1000);
					this.getUserList();
				}else if(index==3){
					this.qiago(30*24*60*60*1000);
					this.getUserList()
				}else{
					// s90天
					this.qiago(90*24*60*60*1000);
					this.getUserList()
				}
				
			},
			// 七天前日期
			qiago(deinj){
				var date= new Date();
				var newDate = new Date(date.getTime() - deinj);
				var time = newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate();
				// console.log(time);
				this.time = time+' ' + '23:59:59'
				return time+' ' + '23:59:59';
			},
			//获取用户列表
			getUserList(){
				this.$modal.loading('加载中');
				let data = {
					pageSize: 10,
					 pageNum: this.pageNum,
					 endTime:this.time
				}
				this.$req.get('/xcx/userExtendBind/list',data).then(res=>{
					this.$modal.closeLoading();
					// console.log(res);
					if(res.data.code==200){
						this.List = this.List.concat(res.data.rows);
						if(res.data.total==this.List.length){
							this.flag = 0;
						}
					}else{
						this.$modal.msg(res.data.msg);
					}
					// console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
	}

	.fn_item {
		width: 94rpx;
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.fn_item1 {
		width: 94rpx;
		height: 42rpx;
		background: #126BC9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_txt3 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}

	.txt1 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.txt2 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.txt3 {
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
	}

	.imgs {
		width: 132rpx;
		height: 132rpx;

		border-radius: 50%;
	}

	.clientdetails_all {
		width: 690rpx;
		height: 214rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
</style>